<template>
    <page title="商城订单" ref="pageRef" nav-color="transparent" custom-class="paddingB30">
        <tabbar
            :data="tabbarData"
            :initial="initial"
            @change="onChange"
            custom-class="paddingX14 marginB7"
        />
        <view v-if="tableData && tableData.length > 0">
            <view v-for="item in tableData" :key="item.tradeNo" class="cell">
                <view class="filter" />
                <view class="top">
                    <view class="flex-align-between">
                        <view class="flex-align">
                            <view class="font2 color-2">下单时间：{{ item.createTime }}</view>
                            <view v-if="item.type == 2" class="presell">预售订单</view>
                        </view>
                        <view class="color-theme font2">
                            <text v-if="item.status === 0">待支付</text>
                            <text v-if="item.status === 99">已完成</text>
                            <text v-else-if="item.status === 1">待发货</text>
                            <text v-else-if="item.status === 2">待收货</text>
                            <text v-else-if="item.status === 10">已取消</text>
                            <text v-else-if="item.status === 11">超时取消</text>
                            <text v-else-if="item.status === 12">系统取消</text>
                        </view>
                    </view>
                    <view
                        v-if="item.status === 0 && !(item.type == 2 && item.paidAmount > 0)"
                        class="color-2 font2 paddingT5"
                    >
                        {{ item.paymentTimeoutTime }}将自动取消该订单，如有优惠券，将自动退回
                    </view>
                </view>
                <view class="middle flex-align flex1" @click="showDetail(item)">
                    <image :src="item.itemList[0].cover" mode="aspectFit" class="img" />
                    <view class="self-stretch flex-column-between marginL12 flex1" style="width: 0">
                        <view class="color-1 bold line-ellipsis font4">
                            {{ item.itemList[0].name }}
                        </view>
                        <view class="flex-align-between">
                            <view class="flex-align">
                                <view class="color-1 bold font4">
                                    ¥{{ item.itemList[0].price }}
                                </view>
                                <view
                                    v-if="
                                        item.status === 0 && item.type == 2 && item.paidAmount > 0
                                    "
                                    class="deposit"
                                >
                                    定金：¥{{ item.depositAmount }}
                                </view>
                            </view>
                            <view class="color-1 font2">X{{ item.itemList[0].quantity }}</view>
                        </view>
                        <view class="color-theme font2" v-if="item.couponAmount">
                            使用优惠券-{{ item.couponAmount }}
                        </view>
                        <view v-if="item.status === 0" class="flex-align">
                            <view class="color-3 font1 flex-align">
                                <view>总价：</view>
                                <view>
                                    <text class="font1">¥</text>
                                    <text class="font6 bold">{{ item.totalAmount }}</text>
                                </view>
                            </view>
                            <view class="color-theme font1 flex-align paddingL12">
                                <view
                                    v-if="
                                        item.type === 1 || (item.type === 2 && item.restFlag === 1)
                                    "
                                >
                                    需付款：
                                </view>
                                <view v-if="item.type === 2 && !item.restFlag">需付定金：</view>
                                <view>
                                    <text class="font1">¥</text>
                                    <text
                                        v-if="
                                            item.type === 1 ||
                                            (item.type === 2 && item.restFlag === 1)
                                        "
                                        class="font6 bold"
                                    >
                                        {{ item.paymentAmount - item.paidAmount }}
                                    </text>
                                    <text
                                        v-if="item.type === 2 && !item.restFlag"
                                        class="font6 bold"
                                    >
                                        {{ item.depositAmount }}
                                    </text>
                                </view>
                            </view>
                        </view>
                        <view v-else class="color-theme flex-align">
                            <view class="color-3 font1 flex-align">
                                <view>总价：</view>
                                <view>
                                    <text class="font1">¥</text>
                                    <text class="font6 bold">{{ item.totalAmount }}</text>
                                </view>
                            </view>
                            <view class="color-theme font1 flex-align paddingL12">
                                <text class="font2">实付款：</text>
                                <text class="font8 bold">¥{{ item.paidAmount }}</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="paddingY12 flex-align">
                    <view class="font2 line-ellipsis flex1" style="width: 0">
                        订单号：{{ item.tradeNo }}
                    </view>
                    <button
                        class="btn-clear copy flex-shrink0"
                        @click.stop="$common.copy(item.tradeNo)"
                    >
                        复制
                    </button>
                </view>
                <view class="paddingB12 flex-align-end">
                    <view v-if="item.status === 0" class="paddingL18 flex-shrink0">
                        <button class="cm-plain-btn btn" @click.stop="realPay(item)">付款</button>
                    </view>
                    <view v-if="item.status === 1" class="paddingL10 flex-shrink0">
                        <button class="cm-plain-btn btn info" @click.stop="showAddress(item)">
                            修改地址
                        </button>
                    </view>
                    <button
                        v-if="item.status === 2"
                        class="btn"
                        style="padding: 0 10rpx; margin: 0 10rpx"
                        @click.stop="receive(item)"
                    >
                        确认收货
                    </button>
                    <button
                        v-if="[2, 99].includes(item.status)"
                        class="btn"
                        style="padding: 0 10rpx; margin: 0 10rpx"
                        @click.stop="showExpress(item)"
                    >
                        物流信息
                    </button>
                </view>
            </view>
        </view>
        <empty v-if="isEmpty" :top="200" light />
    </page>
</template>
<script>
    import { LEVEL_MAP } from '@/utils/config'
    import tabbar from '@/components/tabbar'
    import empty from '@/components/empty'
    import pageMixin from './../../mixin/page'
    import loginMixin from '@/mixin/login'
    import { baseEncode } from '../../utils/utils'
    export default {
        mixins: [pageMixin, loginMixin],
        components: { tabbar, empty },
        data() {
            return {
                LEVEL_MAP,
                initial: 0,
                tabbarData: [
                    {
                        label: '全部',
                        value: 'all'
                    },
                    {
                        label: '待支付',
                        value: 'to_pay'
                    },
                    {
                        label: '待补款',
                        value: 'to_payLeft'
                    },
                    {
                        label: '待发货',
                        value: 'to_delivery'
                    },
                    {
                        label: '待收货',
                        value: 'to_receive'
                    },
                    {
                        label: '已完成',
                        value: 'complete'
                    },
                    {
                        label: '未完成',
                        value: 'uncomplete'
                    }
                ],
                index: 0
            }
        },
        computed: {
            itemWidth() {
                let width = this.$store.state.systemInfo.screenWidth
                width = (width - 28 - 30 - 16) / 5
                let height = (91 / 60) * width
                return { width, height }
            },
            payInfo() {
                return this.$store.state.payInfo
            }
        },
        watch: {
            payInfo(val) {
                if (val && val.payResult == 'SUCCESS') {
                    this.paySuccess(val)
                } else if (val && val.payResult !== 'SUCCESS') {
                }
            }
        },
        onLoad(options) {
            this.initial = options.active || 0
            this.index = this.initial
            if (this.$store.state.hide == 1) {
                this.$service.user.getHide()
            }
        },
        mounted() {
            setTimeout(() => {
                this.refresh(true)
            }, 100)
        },
        onPullDownRefresh() {
            this.refresh()
        },
        onReachBottom() {
            this.loadMore()
        },
        methods: {
            init() {
                this.refresh()
            },
            async loadData(loading) {
                const item = this.tabbarData[this.index]
                const res = await this.$service.mall.orders(
                    this.pageNum,
                    this.pageSize,
                    item.value,
                    loading
                )
                return res
            },
            onChange(index) {
                this.index = index
                this.refresh(true)
            },
            showDetail(item) {
                this.$router.push('order_product_detail', { tradeNo: item.tradeNo })
            },
            showExpress(item) {
                this.$router.push('packages', { type: 1, tradeNo: item.deliveryTradeNo })
            },
            async realPay(item) {
                const res = await this.$service.mall.orderPay(item.tradeNo, 'WXPAY_JSAPI')
                if (res) {
                    if (res.paySuccess) {
                        this.refresh()
                        if (this.$store.state.hide == 1) {
                            this.$service.user.getHide()
                        }
                        return
                    }
                    if(res.redirectUrl){
                      this.thirdPay(res)
                    }else{
                      this.wechatPay(res)
                    }
                    return
                }
            },
            // wechatPay(data) {
            //     let payInfo = data.payInfo
            //     wx.requestPayment({
            //         timeStamp: payInfo.timeStamp,
            //         nonceStr: payInfo.nonceStr,
            //         package: payInfo.packageValue,
            //         signType: payInfo.signType,
            //         paySign: payInfo.paySign,
            //         success: (res) => {
            //             this.close()
            //             if (this.$store.state.hide == 1) {
            //                 this.$service.user.getHide()
            //             }
            //             this.$router.push('order_product')
            //         },
            //         fail: (res) => {}
            //     })
            // },
            wechatPay(data) {
                let payInfo = data.payInfo
                wx.requestPayment({
                    timeStamp: payInfo.timeStamp,
                    nonceStr: payInfo.nonceStr,
                    package: payInfo.packageValue,
                    signType: payInfo.signType,
                    paySign: payInfo.paySign,
                    success: (res) => {
                      this.close()
                      if (this.$store.state.hide == 1) {
                          this.$service.user.getHide()
                      }
                      this.$router.push('order_product')
                    },
                    fail: (res) => {}
                })
            },
            thirdPay(data) {
                let self = this
                let redirectUrl = data.redirectUrl
                let requestId = data.requestId
                const base64Url = encodeURIComponent(baseEncode(redirectUrl))
                wx.openEmbeddedMiniProgram({
                    path: 'pages/pay/order', // 启动目标页面
                    appId: 'wx0448557563ffc600', // 启动的小程序
                    envVersion: 'release', // develop | trial | release
                    verify: 'binding',
                    extraData: {
                        title: '订单付款', // 导航Title
                        tip: `待支付订单付款`, // 支付提示内容
                        requestId: requestId, // 本次请求ID
                        action: 'epPay', // 支付模式
                        payUrl: base64Url // 支付地址, 需要进行Base64转换
                    },
                    success: (res) => {
                        console.info('启动成功', res)
                    },
                    fail: (err) => {
                        console.info('启动失败', err)
                    }
                })
            },
            paySuccess(payInfo) {
                this.close()
                this.$store.state.payInfo = null
                if (this.$store.state.hide == 1) {
                    this.$service.user.getHide()
                }
                this.$router.push('order_product')
            },
            showAddress(item) {
                this.$router.push('address', { type: 0, tradeNo: item.tradeNo })
            },
            receive(item) {
                this.$message.confirm('确认收货吗?', async () => {
                    const res = await this.$service.mall.receive(item.tradeNo)
                    res && this.refresh()
                })
            }
        }
    }
</script>
<style lang="scss" scoped>
    .cell {
        background: #fff;
        border-radius: 16rpx;
        margin: 20rpx 14px;
        position: relative;
        padding: 0 15px;

        .filter {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            z-index: -1;
            border-radius: 16rpx;
            backdrop-filter: blur(20rpx);
        }

        .top {
            padding: 20rpx 0;
            border-bottom: 2rpx solid #eee;
            .presell {
                background: $color-theme;
                width: 128rpx;
                height: 44rpx;
                line-height: 44rpx;
                border-radius: 22rpx;
                font-size: 24rpx;
                color: #fff;
                margin-left: 16rpx;
                text-align: center;
            }
        }

        .middle {
            padding: 24rpx 0;
            border-bottom: 2rpx solid #eee;

            .img {
                width: 180rpx;
                height: 180rpx;
                border-radius: 8rpx;
            }
            .deposit {
                background: $color-theme;
                height: 40rpx;
                line-height: 40rpx;
                border-radius: 20rpx;
                font-size: 22rpx;
                color: #fff;
                padding: 0 16rpx;
                margin-left: 16rpx;
            }
        }

        .copy {
            padding: 0 6rpx;
            height: 32rpx;
            line-height: 32rpx;
            border-radius: 8rpx;
            text-align: center;
            color: #000;
            font-size: 24rpx;
            background: #fec433;
        }

        .btn {
            height: 48rpx;
            line-height: 48rpx;
            text-align: center;
            padding: 0 20rpx;
            color: #000;
            font-size: 24rpx;
            background: #fec433;
            border-radius: 24rpx;
            border: none;
            box-shadow: none;
            &::after {
                display: none !important;
            }
        }
    }
</style>
